<template>
  <div class="user-wrapper">
    <div class="content-box">
      <router-link :to="{name:'index'}">
        <span title="首页" class="action">
          <Icon type="ios-home-outline" size="22" />
        </span>
      </router-link>
      <a v-if="!$config.production" :href="$config.apiUrl" target="_blank">
        <span title="帮助" class="action">
          <Icon type="ios-help-circle-outline" size="22" />
        </span>
      </a>
      <notice-box title="消息" class="action"></notice-box>
      <Dropdown>
        <span class="action ivu-dropdown-link user-dropdown-menu">
          <Avatar class="avatar" size="small" :src="avatar()"/>
          <span>{{ nickname() }}</span>
        </span>
        <DropdownMenu slot="list" class="user-dropdown-menu-wrapper">
          <DropdownItem name="0">
            <router-link :to="{ name: 'center' }">
              <Icon type="md-person" />
              <span>个人中心</span>
            </router-link>
          </DropdownItem>
          <DropdownItem name="1">
            <router-link :to="{ name: 'settings' }">
              <Icon type="md-settings" />
              <span>账户设置</span>
            </router-link>
          </DropdownItem>
          <DropdownItem name="2" disabled>
            <a>
              <Icon type="md-settings" />
              <span>测试</span>
            </a>
          </DropdownItem>
          <DropdownItem divided name="3">
            <a href="javascript:;" @click="handleLogout">
              <Icon type="md-power"/>
              <span>退出登录</span>
            </a>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
import NoticeBox from '@/components/notice-box'
import { mapActions, mapGetters } from 'vuex'
export default {
  Rname: 'UserMenu',
  components: {
    NoticeBox
  },
  methods: {
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'avatar']),
    handleLogout () {
      const that = this

      this.$Modal.confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk () {
          return that.Logout({}).then(() => {
            window.location.reload()
          }).catch((e) => {
            that.$Message.error(e.message)
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>
